<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common/common_head :: commonHead('角色管理')"/>
    <link rel="stylesheet" th:href="@{/static/plugin/beone/main.css}"/>
</head>
<body>
<div class="lenos-search">
    <div class="select">
        角色名：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="roleName" autocomplete="off" />
        </div>
        描述：
        <div class="layui-inline">
            <input class="layui-input" height="20px" id="roleDesc" autocomplete="off" />
        </div>
        <button class="select-on layui-btn layui-btn-sm" data-type="select"><i class="layui-icon"></i>
        </button>
        <button class="layui-btn layui-btn-sm icon-position-button" id="refresh" style="float: right;"
                data-type="reload">
            <i class="layui-icon">&#xe669;</i>
        </button>
    </div>
</div>
<div class="layui-col-md12" style="height:40px;margin-top:3px;">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-normal" data-type="add">
            <i class="layui-icon">&#xe608;</i>新增
        </button>
        <button class="layui-btn layui-btn-normal" data-type="update">
            <i class="layui-icon">&#xe642;</i>编辑
        </button>
        <button class="layui-btn layui-btn-normal" data-type="detail">
            <i class="layui-icon">&#xe605;</i>查看
        </button>
    </div>
</div>
<table id="roleList" class="layui-hide" lay-filter="role"></table>
<script type="text/html" id="toolBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs  layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/javascript" th:inline="javascript">/*<![CDATA[*/
layuiUtils.onEnter(function () {
    $(".select .select-on").click();
});

layui.use('table', function () {
    var table = layui.table;
    //方法级渲染
    var listUrl =  /*[[@{/system/role/list}]]*/ "/system/role/list";
    table.render({
        id: 'roleList', elem: '#roleList', method:"POST" , url: listUrl
        , cols: [[
              {checkbox: true, fixed: true, width: '5%'}
            , {field: 'roleName', title: '角色名称', width: '10%', sort: true}
            , {field: 'roleDesc', title: '角色描述', width: '15%', sort: true}
            , {field: 'isUse', title: '状态', width: '5%', templet:function (d) {
                return d.isUse == 1 ? '启用' : "停用";
            }}
            , {field: 'action', title: '操作', width: '15%', toolbar: "#toolBar"}
        ]]
        , page: true , request:{pageName:'page',limitName:'rows'}, height: 'full-83'
    });

    var $ = layui.$, active = {
        select: function () {
            var roleName = $('#roleName').val();
            var roleDesc = $('#roleDesc').val();
            table.reload('roleList', {
                where: { roleName: roleName, roleDesc: roleDesc}
            });
        },
        reload: function () {
            $('#roleName').val('');
            $('#roleDesc').val('');
            table.reload('roleList', {
                where: { roleName: null, roleDesc: null }
            });
        },
        add: function () {
            var url =  /*[[@{/system/role/showAdd}]]*/ "/system/role/showAdd";
            layuiUtils.dialog('roleAdd','添加角色', url, 700, 450);
        },
        update: function () {
            var checkStatus = table.checkStatus('roleList')
                    , data = checkStatus.data;
            if (data.length != 1) {
                layer.msg('请选择一行编辑', {icon: 5});
                return false;
            }
            showUpdate(data[0].roleId, true);
        },
        detail: function () {
            var checkStatus = table.checkStatus('roleList')
                    , data = checkStatus.data;
            if (data.length != 1) {
                layer.msg('请选择一行查看', {icon: 5});
                return false;
            }
            showUpdate(data[0].roleId, false);
        }
    };

    //监听工具条
    table.on('tool(role)', function (obj) {
        var data = obj.data;
        if (obj.event === 'detail') {
            showUpdate(data.roleId, false);
        } else if (obj.event === 'del') {
            var index = layuiUtils.confirm('确定删除角色[<label style="color: #00AA91;">' + data.roleName + '</label>]?',function () {
                var url = /*[[@{/system/role/delRole}]]*/ "/system/role/delRole";
                layuiUtils.doRequest(url, {roleId:data.roleId}, function () {
                    layer.close(index);
                    table.reload('roleList');
                });
            })
        } else if (obj.event === 'edit') {
            showUpdate(data.roleId, true);
        }
    });

    $('.layui-col-md12 .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
    $('.select .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });
});

function showUpdate(id, flag) {
    var url =  /*[[@{/system/role/showUpdate/}]]*/ "/system/role/showUpdate/";
    url += id + (flag ? "" : "?detail=true");
    layuiUtils.dialog('roleInfo', (flag ? '编辑角色' : "查看角色详情"), url, 700, 450);
}
/*]]>*/</script>
</body>
</html>